<template>
   <div class="ageBox">
      <div class="title">
         <p>年龄比例</p>
         <img src="../../images/dataScreen-title.png" alt="">
      </div>
      <!-- 图形图表的容器 -->
      <div class="charts" ref="charts"></div>
   </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
// 组件挂载完毕，初始化图形图表
onMounted(() => {
   let mycharts = echarts.init(charts.value)
   mycharts.setOption({
      tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
         orient: 'vertical',
         right: 10,
         data: ['10岁以下', '10-18岁', '18-30岁', '30-40岁', '40-60岁', '60岁以上'],
         textStyle: {
            color: 'white',
            fontSize: 16
         }
      },
      series: [
         {
            name: '年龄比例',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            // itemStyle: {
            //    borderRadius: 20,
            //    boderColor: '#fff',
            //    borderWidth: 2
            // },
            label: {
               show: false,
               position: 'center'
            },
            emphasis: {
               label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
               }
            },
            labelLine: {
               show: false
            },
            data: [
               { value: 335, name: '10岁以下' },
               { value: 310, name: '10-18岁' },
               { value: 234, name: '18-30岁' },
               { value: 135, name: '30-40岁' },
               { value: 1548, name: '40-60岁' },
               { value: 1548, name: '60岁以上' }
            ]
         }
      ],
      // 调整图形图表的位置
      grid: {
         left: 0,
         right: 0,
         top: 0,
         bottom: 0
      }
   })
})
</script>

<style lang="scss" scoped>
.ageBox {
   background: url(../../images/dataScreen-main-lb.png) no-repeat;
   background-size: cover;

   .title {
      p {
         color: white;
         font-size: 20px;
      }
   }

   .charts {
      height: 200px;
   }
}
</style>